<template>
	<view>	
	<view>
	      <u-notice-bar :text="text1"></u-notice-bar>
	    </view>
 <u-swiper :list="imgslist" indicator indicatorMode="line" circular height="230px"></u-swiper>	
	
	
	<view class="goods-card">
	  <view class="goods-header">
	    <text class="goods-title">{{goods.gname}}</text>
		 <text class="goods-id">库存:{{goods.stock}}</text>
		  <text class="goods-id">销量:{{goods.lowstock}}</text>
	  </view>
	  <view class="goods-note">{{goods.note}}</view>
	  <view class="goods-desc">{{goods.description}}</view>
	</view>
<view class="delivery-card">
  <text class="icon">️🚚</text>
  <text>预计到货时间：</text>
  <text class="highlight">{{goods.sendtime}}</text>
</view>

<view class="record-card">
  <view class="card-header">
    <text class="card-title">购买记录</text>
    <text class="card-icon">📋</text>
  </view>
  </view>
<view>
<view class="section-title with-icon">
  <u-icon name="list-dot" color="#ff5500" size="18"></u-icon>
  <text>商品详情</text>
</view>
  <!-- 替换u-swiper为普通图片列表 -->
  <view class="image-list">
    <image 
      v-for="(img, index) in imgslist" 
      :key="index"
      :src="img"
      mode="aspectFill"
      class="detail-image"
      @click="previewImage(index)"
    />
  </view>
</view>

	
	
	
		<view class="navigation">
					<view class="left">
						<view class="item">
							<u-icon name="server-fill" :size="40" :color="$u.color['contentColor']"></u-icon>
							<view class="text u-line-1">客服</view>
						</view>
						<view class="item">
							<u-icon name="home" :size="40" :color="$u.color['contentColor']"></u-icon>
							<view class="text u-line-1">店铺</view>
						</view>
						<view class="item car" @click="showCart1">
							<u-badge class="car-num" :value="total" type="error" :absolute="true" :offset="[-3, -6]"></u-badge>
							<u-icon name="shopping-cart" :size="40" :color="$u.color['contentColor']"></u-icon>
							<view class="text u-line-1">购物车</view>
						</view>
					</view>
					<view class="right">
						<view class="cart btn u-line-1" @click="show = true">加入购物车</view>
						<view class="buy btn u-line-1">立即购买</view>
					</view>
				</view>
		 <view>
			
			<u-popup :show="show" mode="bottom" @close="close" :closeable="true" :round="20">
			  <view class="popup-container">
			    <!-- 商品信息部分 -->
			    <view class="product-section">
			      <view class="product-image">
			        <img :src="imgs[0]" class="product-img" />
			      </view>
			      <view class="product-info">
			        <view class="product-title">{{goods.note}} | {{goods.detailtitle}}</view>
			        <view class="product-unit">{{goods.unit}}</view>
			        <view class="product-price">&yen;{{goods.saleprice}}</view>
			      </view>
			    </view>
			    
			    <!-- 购买数量部分 -->
			    <view class="quantity-section">
			      <view class="quantity-header">
			        <text class="quantity-title">购买数量</text>
			        <text class="stock-info">仅剩{{goods.stock}}件</text>
			      </view>
			      <u-number-box 
			        v-model="value" 
			        @change="valChange"
			        class="quantity-input"
			        button-size="36"
			        color="#ffffff"
			        bgColor="#00aa00"
			        iconStyle="color:#fff"
			        :min="1"
			        :max="goods.stock"
			      ></u-number-box>
			    </view>
			    
			    <!-- 操作按钮 -->
			    <view class="action-buttons">
			      <button class="addcart-btn" @click="addCart">加入购物车</button>
			    </view>
			  </view>
			</u-popup>
			 <u-toast ref="uToast"></u-toast>
		  </view>	  
		  
    </view>
	
	
	

</template>

<script>
	import { getGoodsById} from '@/api/goods.js'
	import { add} from '@/api/cart.js'
	import { API_BASE_URL } from '@/utils/appConfig.js'
	import {mapState,mapActions} from 'vuex'
	export default {
		data() {
			return {
				text1: '这里是优选购物线上商店的详情页面，欢迎前来光顾本单商品',
				show:false,
				goods:null,
				imgs:[],
				gid:null,
				value:1,
				gname:'',
				// goods: {  // 初始化为空对象而不是null
				//       note: '',
				//       detailtitle: '',
				//       unit: '',
				//       saleprice: '',
				//       stock: 0,
				//       goodsid: null  // 添加这个字段用于addCart方法
				//     },
				imgslist:[],
				baseUrl:API_BASE_URL,
			}
		},
		computed:{
			...mapState(['total'])
		},
		methods: {
			...mapActions(['changeCartTotal']),
			valChange(e) {
							console.log('当前值为: ' + e.value)
						},
		        showCart1(){
					//
							// console.log(item.gid);
							uni.$u.route({
								type:"switchTab",
								url:"pages/cart/index"
							})
						},
			addCart(){
				const cartgoods={
					goodsid:this.goods.gid,
					userid:3,
					price:this.goods.saleprice,
					quantity:this.value,
					issubmit:0
				}
			// 	//连接后端数据，添加数据
				add(cartgoods).then(res=>{
					console.log("添加成功");
					this.$refs.uToast.show({
						message:res.msg,
						complete:()=>{
							this.show = false;
							this.changeCartTotal();
						}
					});
				})
			},
			      close() {
			        this.show = false
			        // console.log('close');
			      },
			getData(){
				getGoodsById(this.gid).then(res=>{
					console.log(res.data);
					this.imgs = [];
					this.goods = res.data;
				if (this.goods.gimg != null) {
					this.goods.gimg.split(",").forEach(item=>{
						this.imgs.push(API_BASE_URL+"/"+item)
						this.imgslist.push(API_BASE_URL+"/"+item)
					})
					}
					
				})
			}
		},
		onLoad(options){
			// this.getImgsData(),
			//console.log(options)
			this.changeCartTotal();
			this.gid = options.id
				console.log(this.gid)
			 this.getData();
	}
	 }
</script>

<style lang="scss" scoped>
	 .navigation {
		  position: fixed;
		  left:0rpx;
		  bottom: 0rpx;
	  	display: flex;
	  	margin-top: 100rpx;
	  	border: solid 2rpx #f2f2f2;
	  	background-color: #ffffff;
	  	padding: 16rpx 0;
	  	.left {
	  		display: flex;
	  		font-size: 20rpx;
	  		.item {
	  			margin: 0 30rpx;
	  			&.car {
	  				text-align: center;
	  				position: relative;	
	  				 .car-num {
	  					position: absolute;
	  					top: 0rpx;
	  					right: 0rpx;
	  				}
	  			}
	  		}
	  	}
	  	.right {
	  		display: flex;
	  		font-size: 24rpx;
	  		align-items: center;
	  		.btn {
	  			line-height: 66rpx;
	  			padding: 0 25rpx;
	  			border-radius: 36rpx;
	  			color: #ffffff;
	  		}
	  		.cart {
	  			background-color: #ed3f14;
	  			margin-right: 25rpx;
	  		}
	  		.buy {
	  			background-color: #ff7900;
	  		}
	  	}}
	     //数量按钮靠右
			.container {
			  display: flex;
			  justify-content: flex-end; /* 靠右对齐 */
			}
			.shuliang {
			  display: flex;
			   justify-content: flex-start; /* 明确靠左 */
			   font-size:34rpx;
			}
	.delivery-card {
	  display: flex;
	  align-items: center;
	  background: #f5f5f5;
	  padding: 10px 12px;
	  border-radius: 8px;
	  font-size: 14px;
	}
	.highlight {
	  color: #ff5500; /* 橙色强调 */
	  margin-left: 5px;
	}
	.icon {
	  margin-right: 8px;
	  font-size: 16px;
	}	
		.goods-card {
		  background: #fff;
		  border-radius: 12px;
		  padding: 16px;
		  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
		  margin-bottom: 16px;
		}
		
		.goods-header {
		  display: flex;
		  justify-content: space-between;
		  margin-bottom: 8px;
		}
		
		.goods-title {
		  font-size: 16px;
		  font-weight: bold;
		  color: #333;
		}
		
		.goods-id {
		  font-size: 12px;
		  color: #999;
		  background: #f5f5f5;
		  padding: 2px 6px;
		  border-radius: 4px;
		}
		
		.goods-note {
		  font-size: 14px;
		  color: #ff5500;
		  margin-bottom: 8px;
		  padding: 4px 0;
		  border-bottom: 1px dashed #eee;
		}
		
		.goods-desc {
		  font-size: 14px;
		  color: #666;
		  line-height: 1.5;
		}
		
//购买记录		
	.record-card {
	  background: white;
	  border-radius: 12px;
	  padding: 16px;
	  margin: 10px;
	  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
	}
	.card-header {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}
	.card-title {
	  font-size: 16px;
	  font-weight: bold;
	  color: #2c3e50;
	}
	.card-icon {
	  font-size: 20px;
	}	
	
	
	
/* 样式部分 */
.section-title {
  font-size: 16px;
  font-weight: bold;
  padding: 15px;
  border-bottom: 1px solid #f5f5f5;
}

.image-list {
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.detail-image {
  width: 100%;
  height: 300px;
  margin-bottom: 10px;
  border-radius: 8px;
}
.section-title.with-icon {
  display: flex;
  align-items: center;
  font-size: 32rpx;
  color: #333;
  padding: 20rpx 0;
  margin: 30rpx 0;
  border-bottom: 1px solid #f5f5f5;
}

.with-icon text {
  margin-left: 10rpx;
  font-weight: bold;
  text-align: center; /* 水平居中 */
    line-height: 1.5; /* 垂直居中（根据高度调整） */
    font-size: 32rpx;
    padding: 20rpx 0;
}



.popup1 {
		padding: 0rpx 20rpx;
		display: flex;
		width: 70%;
		margin: 0rpx 20rpx;
		font-size: 36rpx;

		& img {
			width: 100rpx;
			height: 100rpx;
		}
	}
.popup2 {
			height: 200rpx;
			display: flex;
			justify-content: space-between;
			padding: 2rpx 20rpx
		}
.addcart {
		background-color: #00aa00;
		color: #fff;
		font-size: 36rpx;
		border-radius: 20rpx;
		width: 90%;
		margin: 0rpx 20rpx
	}
	
	
	
	
	//d
	.popup-container {
	  padding: 30rpx;
	  background: #fff;
	}
	
	/* 商品信息部分 */
	.product-section {
	  display: flex;
	  align-items: center;
	  padding-bottom: 30rpx;
	  border-bottom: 1rpx solid #f5f5f5;
	}
	
	.product-image {
	  margin-right: 25rpx;
	}
	
	.product-img {
	  width: 150rpx;
	  height: 150rpx;
	  border-radius: 12rpx;
	  object-fit: cover;
	  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	}
	
	.product-info {
	  flex: 1;
	}
	
	.product-title {
	  font-size: 34rpx;
	  font-weight: 600;
	  color: #333;
	  margin-bottom: 10rpx;
	  line-height: 1.4;
	}
	
	.product-unit {
	  font-size: 26rpx;
	  color: #999;
	  margin-bottom: 15rpx;
	}
	
	.product-price {
	  font-size: 36rpx;
	  color: #e54d42;
	  font-weight: bold;
	}
	
	/* 购买数量部分 */
	.quantity-section {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  padding: 30rpx 0;
	  border-bottom: 1rpx solid #f5f5f5;
	}
	
	.quantity-header {
	  display: flex;
	  flex-direction: column;
	}
	
	.quantity-title {
	  font-size: 30rpx;
	  color: #333;
	  margin-bottom: 8rpx;
	}
	
	.stock-info {
	  font-size: 24rpx;
	  color: #999;
	}
	
	.quantity-input {
	  margin-left: 20rpx;
	}
	
	/* 操作按钮 */
	.action-buttons {
	  padding-top: 30rpx;
	}
	
	.addcart-btn {
	  background: linear-gradient(90deg, #00aa00, #00bb00);
	  color: white;
	  border-radius: 50rpx;
	  height: 90rpx;
	  line-height: 90rpx;
	  font-size: 32rpx;
	  box-shadow: 0 4rpx 12rpx rgba(0, 170, 0, 0.2);
	  transition: all 0.3s;
	}
	
	.addcart-btn:active {
	  opacity: 0.9;
	  transform: scale(0.98);
	}
</style>
	